<template>
    <div class="view-index">
        <user-bar class="flex" :mobile="mobile" :logoClick="onClosePopup" />
        
        <div class="body" :class="{showPopup:showCreate}">
        	
        	<div class="list">
        		<panel class="car-item" key={d.id} v-for="d of listData">
	    			<div class="top">
	    				<div class="header"><img src="../../assets/imgs/server-head.png" /></div>
	    				<h6>{{textStatus(d.status)}}</h6>
	    			</div>
	    			<div class="car">
	    				<span v-if="d.brandTxt">{{d.brandTxt}}</span>
	    				<span>{{d.plateNum}}</span>
	    			</div>
	    			<div class="result">

	    				<div class="item" key={p.id} v-for="p of d.policies" v-if="d.status===4||d.status===5">
	    					<insurance
		    					:logoId="p.insComId"
		    					:title="p.insComName"
		    					:price="p.currentAmt"
		    					:defaultPrice="p.totalAmt"
		    					:id="p.id"
		    					:status="p.status"
		    					:onPayment="onPayment"
		    					:onDetail="onDetail" />
	    				</div>

	    				<p class="message" v-if="d.status===1||d.status===2||d.status===3">客服人员正在飞速处理您的申请，请耐心等待客服致电为您报价</p>

	    				<p class="message" v-if="d.status===9">您的保险报价申请已取消，如有其他需要请致电客服<a href="tel:XXXXXXXXXXX">XXXXXXXXXXX</a></p>

	    			</div>

	    			<delivery
	    				v-if="d.status===5"
	    				:id="d.id"
	    				:name="d.receiveName"
	    				:phone="d.receivePhone"
	    				:address="d.receiveAddr"
	    				:submited="d.receiveUpdSource==2"
	    				:onSubmit="onDeliverySubmit" />
	    			
	        	</panel>

        	</div>

        	<a class="more" @click="onClickMoreCar">
        		<p>还有别的车？获取报价</p>
        		<i></i>
        	</a>

        </div>

        <div class="body2" v-show="showCreate" :class={show:aniCreate}>
        	<div class="inner">
        		<create-insurance
	        		class="popup"
	        		ref="createInsurancePopup"
		    		:onSubmit="onCreateInsuranceSubmit" />
        	</div>
        </div>

    </div>
</template>

<script>
import $http from '@/assets/http'
import {getMobile} from '@/assets/token'
import userBar from '@/components/userbar'
import panel from '@/components/panel'
import insurance from '@/components/insurance'
import createInsurance from '@/components/createInsurance'
import alert from '@/components/alert'
import loading from '@/components/loading'
import toast from '@/components/toast'
import delivery from '@/components/delivery'

export default {
	data() {
		return {
			listData: null,
			showCreate: false,
			aniCreate: false,
		}
	},
	created() {
		this.asyncInit()
	},
	methods: {
		async asyncInit() {
			loading.show()
			try {
				const res = await this.fetchData()
				loading.hide()
				this.listData = res.data.list
				if (this.listData.length === 0) {
					this.$router.push(`/new`)
				}
			} catch(e) {
				if (e.response.data.errorMsg) {
	                toast.show(e.response.data.errorMsg)
	            } else {
	                alert.show('系统错误，请稍后再试')
	            }
			}
			loading.hide()
		},
		fetchData() {
			const mobile = getMobile()
			return $http.request({
                method: 'post',
                url: `/ins/apply/${mobile}/query`,
                data: {
                	pageNo: 1,
				    pageSize: 99,
				    mobile: this.mobile,
				    status: null
                }
            })
		},
		onPayment(id, amount) {
			this.$router.push(`/payment/${id}/${amount}`)
		},
		onDetail(id) {
			this.$router.push(`/detail/${id}`)
		},
		onClickMoreCar() {
			this.showCreate = true
			setTimeout(() => {
				this.aniCreate = true
			})
			this.$refs.createInsurancePopup.scrollTop()
		},
		onClosePopup() {
			this.aniCreate = false
			setTimeout(() => {
				this.showCreate = false
			}, 400)
		},
		textStatus(status) {
			switch(status) {
				case 1:
				case 2:
				case 3:
					// 待报价
					return '请您等待客服报价'
				break
				case 4:
					// 待支付
					return '请您选购一款保险方案并支付保费'
				break
				case 5:
					// 已支付
					return '支付成功，保单将尽快寄送'
				break
				case 6:
					// 已取消
					return '订单已取消'
				break
				default:
					return ''
				break
			}
		},
		async onDeliverySubmit(obj, callback) {
			console.log(callback)
			loading.show()
			try {
				const res = await this.fetchDeliverySubmit(obj)
				callback && callback()
				toast.show('提交成功')
			} catch(e) {
	            if (e.response.data.errorMsg) {
	                toast.show(e.response.data.errorMsg)
	            } else {
	                alert.show('系统错误，请稍后再试')
	            }
			}
			loading.hide()
		},
		fetchDeliverySubmit(obj) {
			return $http.request({
                method: 'put',
                url: `/ins/apply/address/${obj.id}`,
                data: {
                	...obj
                }
            })
		},
		async onCreateInsuranceSubmit(data) {
			loading.show()
			try {
				const res = await this.fetchNewInsuranceData(data)
				await this.asyncInit()
				toast.show('提交成功')
				this.aniCreate = false
				setTimeout(() => {
					this.showCreate = false
				},400)
			} catch(e) {
	            if (e.response.data.errorMsg) {
	                toast.show(e.response.data.errorMsg)
	            } else {
	                alert.show('系统错误，请稍后再试')
	            }
	            this.onClosePopup()
            }
            loading.hide()
		},
		fetchNewInsuranceData(data) {
			return $http.request({
                method: 'post',
                url: '/ins/apply/add',
                data
            })
		}
	},
	computed: {
		mobile() {
			return getMobile()
		}
	},
    components: {
    	userBar,
    	panel,
    	insurance,
    	createInsurance,
    	delivery
    }
}
</script>

<style scoped lang="scss">
	@import './style'
</style>
